<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.MERCHANT.NUM' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="merNum" name="merNum" nz-input />
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('merNum'), name:'merNum'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.MERCHANT.NAME' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="merName" name="merName" nz-input />
            <nz-form-explain>
              <ng-container *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('merName'), name:'merName'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.MERCHANT.NAME_EN' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="merNameEN" name="merNameEN" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('merNameEN'), name:'merNameEN'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.CONTACT_NAME' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="contactName" name="contactName" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('contactName'), name:'contactName'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="12">
        <nz-form-item>
          <nz-form-label>{{'GENERAL.INFO.EMAIL' | i18n}}</nz-form-label>
          <nz-form-control nzHasFeedback>
            <input formControlName="contactEmail" name="contactEmail" nz-input />
            <nz-form-explain>
              <ng-container
                *ngTemplateOutlet="errorTpl;context:{control:validateForm.get('contactEmail'), name:'contactEmail'}">
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('minlength'); else fourth">{{ errorTips[name]?.minlength }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('pattern'); else fifth">{{ errorTips[name]?.pattern }}</ng-container>
    </ng-template>
    <ng-template #fifth>
      <ng-container *ngIf="control.hasError('isNumTaken')">{{ errorTips[name]?.isNumTaken }}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>
